import React, { useEffect, useState } from 'react';
import { Outlet } from 'react-router-dom';
import { Menu, Dropdown } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import "./style.scss"
import axios from "../../utils/request"


const Index = () => {
    const [list, setList] = useState([])
    const http = async () => {
        const res = await axios.get('/getList')
        console.log(res)
        setList(res.data.data)
    }
    useEffect(() => {
        http()
    }, [])
    const menu = (
        <Menu>
            {
                list.length && list.map((v, i) => {
                    return (
                        <Menu.Item key={i}>
                            {v.title}
                        </Menu.Item>
                    )
                })
            }
        </Menu>
    )
    return (
        <div>
            <div className="head">
                <Dropdown overlay={menu}>
                    <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                        Products <DownOutlined />
                    </a>
                </Dropdown>
            </div>
            <Outlet />
        </div>
    );
}

export default Index;
